//     零星物料派单
import { SearchOutlined, RedoOutlined } from '@ant-design/icons';
import { Button, Form, Input, Table, Pagination, Space, Modal, Radio, Select, Row, Col, message, Popconfirm } from 'antd';
import type { ColumnsType } from 'antd/lib/table';
import { useState, FC, useEffect } from 'react';
import './index.css'
import { addController, deleteController, getController, updateController } from '../../../utils/zhy/index'
import axios from 'axios';

interface DataType {

  tobId: number;//序列号
  materialsCode: string;//物料编码
  materialsName: string;//物料名称
  supNumber: number;//供方代号
  supAbbreviations: string;//供方简称
  tobNumber: number;//批次
  tobCount: number;//数量
  tobOrdernumber: string;//订单号
  tobReceNum: string;//收货单号
  tobPoint: number;//定点
  tobNopaper: number;//无纸化派单
  tobWmsDispatch: number;//WMS派单
  tobReason: string;//派单失败原因
  dispatch: string;//派单员
  lnspector: string;//检查员
  tobState: number;//状态
  tobRemark: string;//备注
}
const MaterialSingle: FC = () => {
  const [data, setData] = useState<DataType[]>()
  //  获取的数据
  useEffect(() => {
    getController().then((res) => {
      console.log(res.data.data);
      if (res.data.code == 200) {
        console.log("成功请求数据！");
        let datas = res.data.data.listSupplier
        setData(datas)
        console.log(datas);
      } else {
        console.log("请求数据失败！");
      }
    }).catch((error) => {
      console.log(error);
    })
  }, [])

  //---------- 对话弹框
  const [form] = Form.useForm()
  // 编辑
  const redact = () => {
    setRedact(true);
  }
  // 新增
  const showModal = () => {
    setIsModalVisible(true);
  };
  //------------------------------------------------------------
  // 新增
  const [isModalVisible, setIsModalVisible] = useState(false);
  // 
  const handleOk = () => {
    addController().then(res => {
      console.log(res.data.data);
      getController()
    }).catch(err => {
      console.log(err);
    })
    setIsModalVisible(false);
  };
  const handleCancel = () => {
    setIsModalVisible(false);
  };
  // 编辑
  const [Redact, setRedact] = useState(false);
  const handleOk1 = () => {
    updateController().then(res => {
      getController()
    }).catch(err => {
      console.log(err);
    })
    setRedact(false);
  }
  const handleCancel1 = () => {
    setRedact(false);
  }
  // 查询
  const [materialsCode1, setSearchid] = useState<string>()
  const [supNumber1, setSearchgroup] = useState<string>()
  const [tobReceNum1, setSearchgroup1] = useState<string>()
  const onsearchid = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setSearchid(e.target.value)
  };
  const onsearchid1 = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setSearchgroup(e.target.value)
  };
  const onsearchid2 = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setSearchgroup1(e.target.value)
  };
  const selectname = () => {
    console.log(setSearchid, setSearchgroup, setSearchgroup1);
    axios({
      url: `/api3/material/selectTheOddBill`,
      params: { materialsCode: materialsCode1, supNumber: supNumber1, tobReceNum: tobReceNum1 }
    }).then(res => {
      setData(res.data.data.listSupplier)
    }).catch(error => console.log(error)
    )
  }
  // 重置
  const resoveval = () => {
    setSearchid('')
    setSearchgroup('')
    setSearchgroup1('')
    getController().then(res => {
      setData(res.data.data.listSupplier)
    }).catch(error => console.log(error)
    )
  }
  //---- 删除
  const confirm = (tobId: number) => {
    console.log(tobId);
    deleteController(tobId).then((res) => {
      getController()
      message.success('删除成功！');
    }).catch((error) => {
      console.log(error);
    })
  };
  const cancel = (tobId: number) => {
    console.log(tobId);
    message.error('取消删除！');
  };
  // --------------------
  //table的相关数据，函数
  const columns: ColumnsType<DataType> = [
    {
      title: '序号',
      dataIndex: 'tobId',
      align: 'center',
      fixed: 'left',
      width: 100,
    },
    {
      title: '操作',
      align: 'center',
      fixed: 'left',
      dataIndex: 'address',
      render: (_, record) => (
        <Space size="middle">
          <span onClick={redact}>编辑</span>

          <Popconfirm
            title="你确定进行修改吗?"
            onConfirm={() => {

              confirm(record.tobId)
            }}
            onCancel={() => { cancel(record.tobId) }}
            okText="Yes"
            cancelText="No"
          >
            <span >删除</span>
          </Popconfirm>
        </Space>
      )
    },
    {
      title: '物料编码',
      dataIndex: 'materialsCode',
      align: 'center',
    },
    {
      title: '物料名称',
      dataIndex: 'materialsName',
      align: 'center',

    },
    {
      title: '供方代号',
      dataIndex: 'supNumber',
      align: 'center',

    },

    {
      title: '供方简称',
      dataIndex: 'supAbbreviations',
      align: 'center',

    },
    {
      title: '批次',
      dataIndex: 'tobNumber',
      align: 'center',
    },
    {
      title: '数量',
      dataIndex: 'tobCount',
      align: 'center',
    },
    {
      title: '订单号',
      dataIndex: 'tobOrdernumber',
      align: 'center',
    },
    {
      title: '收货单号',
      dataIndex: 'tobReceNum',
      align: 'center',
    },
    {
      title: '定点',
      dataIndex: 'tobPoint',
      align: 'center',
      render: (_, record) => (
        <Space size="middle">
          <p>{record.tobPoint == 0 ? '是' : '否'}</p>
        </Space>
      )

    },
    {
      title: '无纸化派单',
      dataIndex: 'tobNopaper',
      align: 'center',
      render: (_, record) => (
        <Space size="middle">
          <p>{record.tobNopaper == 0 ? '否' : '是'}</p>
        </Space>
      )
    },
    {
      title: 'WMS派单',
      dataIndex: 'tobWmsDispatch',
      align: 'center',
      render: (_, record) => (
        <Space size="middle">
          <p>{record.tobWmsDispatch == 0 ? '已派单' : '未派单'}</p>
        </Space>
      )
    },
    {
      title: '派单失败原因',
      dataIndex: 'tobReason',
      align: 'center',
    },
    {
      title: '派单员',
      dataIndex: 'dispatch',
      align: 'center',
    },
    {
      title: '检查员',
      dataIndex: 'lnspector',
      align: 'center',
    },
    {
      title: '状态',
      dataIndex: 'tobState',
      align: 'center',
      render: (_, record) => (
        <Space size="middle">
          <p>{record.tobState == 0 ? '已派单' : '未派单'}</p>
        </Space>
      )
    },
    {
      title: '备注',
      dataIndex: 'tobRemark',
      align: 'center',

    },
  ];

  const { Option } = Select;
  // 查询
  const { TextArea } = Input
  return (<div >

    <Form form={form} layout="inline" className='btnStyel'>
      <Form.Item >物料编号:<Input className='inp' placeholder="物料组编号" value={materialsCode1} allowClear onChange={onsearchid} /></Form.Item>
      <Form.Item >供货代码:<Input className='inp' placeholder="供货代码" value={supNumber1} allowClear onChange={onsearchid1} /></Form.Item>
      <Form.Item >收货编号:<Input className='inp' placeholder="收货编号" value={tobReceNum1} allowClear onChange={onsearchid2} /></Form.Item>
      <Form.Item><Button icon={<SearchOutlined />} style={{ borderColor: 'rgb(2,167,240)', color: 'rgb(2,167,240)' }} onClick={selectname}>查询</Button></Form.Item>
      <Form.Item><Button icon={<RedoOutlined />} style={{ borderColor: 'rgb(245,154,35)', color: 'rgb(245,154,35)' }} onClick={resoveval}>重置</Button></Form.Item>
    </Form>
    <div ><Button style={{ margin: '0.25rem', borderRadius: '5px' }} type="primary" onClick={showModal}>+新增</Button></div>
    {/* <Table
      rowKey={(record) => { return record.tobId }}
      columns={columns}
      dataSource={data}
      bordered
      pagination={false}
      scroll={{ x: 2300 }}

    /> */}
    {/* 分页 */}
    <Table pagination={{ showQuickJumper: true, defaultPageSize: 3, showTotal: (total, range) => `共 ${total} 条`, position: ["bottomCenter"] }} scroll={{ x: 2500 }} columns={columns} dataSource={data} rowKey={(record) => { return record.tobId }} />
    {/* 新增 */}
    <Modal title="零星物料派单新增" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
      <Form>
        <Row justify="space-around">
          <Col span='10'>
            <Form.Item label="物料编码：" name={'materialsCode'} rules={[{ required: true, message: '请输入!' }]}>
              <Input />
            </Form.Item>
          </Col>
          <Col span='10'>
            <Form.Item label="物料名称：" name={'materialsName'} rules={[{ required: true, message: '请输入!' }]}>
              <Input />
            </Form.Item>
          </Col>
        </Row>
        <Row justify="space-around">
          <Col span='10'>
            <Form.Item label="厂家MLOT:" name={'tobManufacturersMlot '} rules={[{ required: true, message: '请输入!' }]}>
              <Input />
            </Form.Item>
          </Col>
          <Col span='10'>
            <Form.Item label="物料LPN:" name={'tobMaterialsLpn '} rules={[{ required: true, message: '请输入!' }]}>
              <Input />
            </Form.Item>
          </Col>
        </Row>
        <Row justify="space-around">
          <Col span='10'>
            <Form.Item label="供方代号：" name={'supNumber'} rules={[{ required: true, message: '请输入!' }]}>
              <Input />
            </Form.Item>
          </Col>
          <Col span='10'>
            <Form.Item label="供方简称：" name={'supAbbreviations'} rules={[{ required: true, message: '请输入!' }]}>
              <Input />
            </Form.Item>
          </Col>
        </Row>
        <Row justify="space-around">
          <Col span='10'>
            <Form.Item
              label="定点物料："
              name={"tobPoint"}
              rules={[
                {
                  required: true,
                  message: '请输入!',
                },
              ]}
            >
              <Radio.Group>
                <Radio value='0'>是</Radio>
                <Radio value='1'>否</Radio>
              </Radio.Group>
            </Form.Item>
          </Col>
          <Col span='10'>
            <Form.Item
              label="WMS物料"
              name={"tobWmsDispatch"}
              rules={[
                {
                  required: true,
                  message: '请输入!',
                },
              ]}
            >
              <Radio.Group>
                <Radio value='0'>是</Radio>
                <Radio value='1'>否</Radio>
              </Radio.Group>
            </Form.Item>
          </Col>
        </Row>
        <Row justify="space-around">
          <Col span='10'>
            <Form.Item label="订单号：" name={'tobOrdernumber'} rules={[{ required: true, message: '请输入!' }]}>
              <Input />
            </Form.Item>
          </Col>
          <Col span='10'>
            <Form.Item label="收货单号：" name={'tobReceNum'} rules={[{ required: true, message: '请输入!' }]}>
              <Input />
            </Form.Item>
          </Col>
        </Row>
        <Row justify="space-around">
          <Col span='10'>
            <Form.Item label="批次：" name={'batobNumbertch'} rules={[{ required: true, message: '请输入!' }]}>
              <Input />
            </Form.Item>
          </Col>
          <Col span='10'>
            <Form.Item label="数量：" name={'tobCount'} rules={[{ required: true, message: '请输入!' }]}>
              <Input />
            </Form.Item>
          </Col>
        </Row>
        <Row justify="space-around">
          <Col span='10'>
            <Form.Item
              label="物料检验员："
              name={"lnspector"}
              hasFeedback
              rules={[
                {
                  required: true,
                  message: '请输入!',
                },
              ]}
            >
              <Select
                defaultValue="检查1"
                style={{ width: 120 }}
              >
                <Option value="检查1">检查1</Option>
                <Option value="检查2">检查2</Option>
                <Option value="检查3">检查3</Option>
              </Select>
            </Form.Item>
          </Col>
          <Col span='10.5'>
            <Form.Item
              label=" 无纸化派单:"
              name={"tobNopaper"}
              rules={[
                {
                  required: true,
                  message: '请输入!',
                },
              ]}
            >
              <Radio.Group>
                <Radio value='0'>是</Radio>
                <Radio value='1'>否</Radio>
              </Radio.Group>
            </Form.Item>
          </Col>
        </Row>
        <Row justify="space-around" className='but1'>
          <Col span='24'>
            <Form.Item label="备注：" name={'tobRemark'} rules={[{ required: true, message: '请输入!' }]}>
              <TextArea />
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Modal>
    {/* 编辑 */}
    <Modal title="零星物料派单编辑" visible={Redact} onOk={handleOk1} onCancel={handleCancel1}>
      <Form>
        <Row justify="space-around">
          <Col span='10'>
            <Form.Item label="物料编码：" name={'materialsCode'} rules={[{ required: true, message: '请输入!' }]}>
              <Input />
            </Form.Item>
          </Col>
          <Col span='10'>
            <Form.Item label="物料名称：" name={'materialsName'} rules={[{ required: true, message: '请输入!' }]}>
              <Input />
            </Form.Item>
          </Col>
        </Row>
        <Row justify="space-around">
          <Col span='10'>
            <Form.Item label="厂家MLOT:" name={'tobManufacturersMlot '} rules={[{ required: true, message: '请输入!' }]}>
              <Input />
            </Form.Item>
          </Col>
          <Col span='10'>
            <Form.Item label="物料LPN:" name={'tobMaterialsLpn '} rules={[{ required: true, message: '请输入!' }]}>
              <Input />
            </Form.Item>
          </Col>
        </Row>
        <Row justify="space-around">
          <Col span='10'>
            <Form.Item label="供方代号：" name={'supNumber'} rules={[{ required: true, message: '请输入!' }]}>
              <Input />
            </Form.Item>
          </Col>
          <Col span='10'>
            <Form.Item label="供方简称：" name={'supAbbreviations'} rules={[{ required: true, message: '请输入!' }]}>
              <Input />
            </Form.Item>
          </Col>
        </Row>
        <Row justify="space-around">
          <Col span='10'>
            <Form.Item
              label="定点物料："
              name={"tobPoint"}
              rules={[
                {
                  required: true,
                  message: '请输入!',
                },
              ]}
            >
              <Radio.Group>
                <Radio value='0'>是</Radio>
                <Radio value='1'>否</Radio>
              </Radio.Group>
            </Form.Item>
          </Col>
          <Col span='10'>
            <Form.Item
              label="WMS物料"
              name={"tobWmsDispatch"}
              rules={[
                {
                  required: true,
                  message: '请输入!',
                },
              ]}
            >
              <Radio.Group>
                <Radio value='0'>是</Radio>
                <Radio value='1'>否</Radio>
              </Radio.Group>
            </Form.Item>
          </Col>
        </Row>
        <Row justify="space-around">
          <Col span='10'>
            <Form.Item label="订单号：" name={'tobOrdernumber'} rules={[{ required: true, message: '请输入!' }]}>
              <Input />
            </Form.Item>
          </Col>
          <Col span='10'>
            <Form.Item label="收货单号：" name={'tobReceNum'} rules={[{ required: true, message: '请输入!' }]}>
              <Input />
            </Form.Item>
          </Col>
        </Row>
        <Row justify="space-around">
          <Col span='10'>
            <Form.Item label="批次：" name={'batobNumbertch'} rules={[{ required: true, message: '请输入!' }]}>
              <Input />
            </Form.Item>
          </Col>
          <Col span='10'>
            <Form.Item label="数量：" name={'tobCount'} rules={[{ required: true, message: '请输入!' }]}>
              <Input />
            </Form.Item>
          </Col>
        </Row>
        <Row justify="space-around">
          <Col span='10'>
            <Form.Item
              label="物料检验员："
              name={"lnspector"}
              hasFeedback
              rules={[
                {
                  required: true,
                  message: '请输入!',
                },
              ]}
            >
              <Select
                defaultValue="检查1"
                style={{ width: 120 }}
              >
                <Option value="检查1">检查1</Option>
                <Option value="检查2">检查2</Option>
                <Option value="检查3">检查3</Option>
              </Select>
            </Form.Item>
          </Col>
          <Col span='10.5'>
            <Form.Item
              label=" 无纸化派单:"
              name={"tobNopaper"}
              rules={[
                {
                  required: true,
                  message: '请输入!',
                },
              ]}
            >
              <Radio.Group>
                <Radio value='0'>是</Radio>
                <Radio value='1'>否</Radio>
              </Radio.Group>
            </Form.Item>
          </Col>
        </Row>
        <Row justify="space-around" className='but1'>
          <Col span='24'>
            <Form.Item label="备注：" name={'tobRemark'} rules={[{ required: true, message: '请输入!' }]}>
              <TextArea />
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Modal>
  </div>);
};

export default MaterialSingle



